<%--
  Created by IntelliJ IDEA.
  User: kwc13
  Date: 2023-12-6
  Time: 上午 08:09
  To change this template use File | Settings | File Templates.
--%>
<!-- 标记为HTML格式 -->
<!DOCTYPE html>
<%@ page contentType="text/html;charset=UTF-8" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions" %>
<%@ page isELIgnored="false" %>
<!-- 设置页面为Chain -->
<html lang="ch">
<head>
    <title>小米商城后台管理</title>
    <!-- 设置地址栏主题背景颜色 -->
    <meta name="theme-color" content="#000000">
    <!-- 页面描述 -->
    <meta name="description" content="页面描述信息">
    <!-- 移动端显示 -->
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <!-- 页面Logo -->
    <link rel="shortcut icon" href="http://localhost:8083/resource_packs/images/logo.png">
    <!-- css -->
    <link href="${pageContext.request.contextPath}/other/style/background/commodity.css" rel="stylesheet"
          type="text/css"/>
    <script src="${pageContext.request.contextPath}/other/request/background/commodity_specification.js"></script>
    <script src="${pageContext.request.contextPath}/other/request/background/commodity_insurance_type.js"></script>
    <script src="${pageContext.request.contextPath}/other/request/background/commodity_specification_type.js"></script>
    <script src="${pageContext.request.contextPath}/other/request/background/commodity.js"></script>
    <script src="${pageContext.request.contextPath}/other/scripts/background/commodity.js"></script>

</head>
<body>
<jsp:useBean id="searchInput" scope="request" type="java.lang.String"/>
<div class="head">
    <div class="title">
        <span>商品管理</span>
    </div>

    <div class="search">
        <div class="search-input">
            <label>
                <input type="text" placeholder="请输入商品名称/商品ID" value="${searchInput}">
            </label>
        </div>
        <div class="search-img">
            <img src="http://localhost:8083/resource_packs/images/search_%23fff.png" alt="搜索">
        </div>

    </div>
</div>
<div class="other-operate">

    <div class="sift">
        <label for="status">状态:</label>
        <select name="languages" id="status" class="select-shelves">
            <option value="0">上架</option>
            <option value="2">下架</option>
        </select>
    </div>
    <div class="sift-button">
        <button class="select">查询</button>
        <button class="insert">新增</button>
    </div>
</div>
<table class="employee-table">
    <tr>
        <th>
            ID
        </th>
        <th>
            图片
        </th>
        <th>
            名称
        </th>
        <th>
            状态
        </th>
        <th>
            上架时间
        </th>
        <th>
            价格
        </th>
        <th>
            操作
        </th>
    </tr>


    <jsp:useBean id="commodityPage" scope="request" type="com.xm.entity.Page"/>
    <c:forEach var="commodity" items="${commodityPage.data}">
        <tr>
            <td class="commodity-id">
                    ${commodity.commodityId}
            </td>
            <td class="commodity-images">
                <img src="http://localhost:8083/resource_packs/images/${commodity.commodityImages}" alt="商品图片"/>
            </td>
            <td class="commodity-name">
                    ${commodity.commodityName}
            </td>

            <td class="commodity-state">
                <c:if test="${commodity.commodityState == 0}">
                    上架
                </c:if>
                <c:if test="${commodity.commodityState == 2}">
                    下架
                </c:if>
            </td>
            <td class="shelf-time">
                    ${commodity.shelfTime}
            </td>
            <td class="commodity-price">
                    ${commodity.commodityPrice}
            </td>
            <td class="operate">

                <button class="view" commodity-id="${commodity.commodityId}">查看</button>
                <c:if test="${commodity.commodityState == 0}">
                    <button class="leave" commodity-id="${commodity.commodityId}">下架</button>
                </c:if>
                <c:if test="${commodity.commodityState == 2}">
                    <button class="shelves" commodity-id="${commodity.commodityId}">上架</button>
                </c:if>
            </td>
        </tr>
    </c:forEach>
</table>
<div class="pagination-function">
    <ul class="pagination">
        <c:if test="${commodityPage.pageNumber ne 1}">
            <li><a href="?menuId=102&name=${searchInput}&pageNumber=1&pageSize=${commodityPage.pageSize}">首页</a></li>
            <li>
                <a href="?menuId=102&name=${searchInput}&pageNumber=${commodityPage.pageNumber - 1}&pageSize=${commodityPage.pageSize}">上一页</a>
            </li>
        </c:if>


        <c:forEach var="page" begin="1" end="${commodityPage.totalPages}">
            <c:choose>

                <c:when test="${page eq commodityPage.pageNumber}">
                    <li><a href="?menuId=102&name=${searchInput}&pageNumber=${page}&pageSize=${commodityPage.pageSize}"
                           class="active">${page}</a></li>
                </c:when>
                <c:otherwise>
                    <c:if test="${page eq 1 or page eq commodityPage.totalPages or (page ge commodityPage.pageNumber - 2 and page le commodityPage.pageNumber + 2)}">
                        <li>
                            <a href="?menuId=102&name=${searchInput}&pageNumber=${page}&pageSize=${commodityPage.pageSize}">${page}</a>
                        </li>
                    </c:if>
                    <c:if test="${page eq commodityPage.pageNumber - 3}">
                        <li><span>...</span></li>
                    </c:if>
                    <c:if test="${page eq commodityPage.pageNumber + 3}">
                        <li><span>...</span></li>
                    </c:if>
                </c:otherwise>
            </c:choose>
        </c:forEach>

        <c:if test="${commodityPage.pageNumber ne commodityPage.totalPages}">
            <li>
                <a href="?menuId=102&name=${searchInput}&pageNumber=${commodityPage.pageNumber + 1}&pageSize=${commodityPage.pageSize}">下一页</a>
            </li>
            <li>
                <a href="?menuId=102&name=${searchInput}&pageNumber=${commodityPage.totalPages}&pageSize=${commodityPage.pageSize}">尾页</a>
            </li>
        </c:if>
    </ul>

</div>


<div class="window" style="display: none">
    <div class="pop-up-shade-layer"></div>
    <div class="pop-ups"
         style="width: 1500px;height: auto;background-color: #ffffff;position: absolute;top: 5%;left: 2%;z-index: 3;">
        <div class="pop-ups-title">
            <span>商品详情</span>
            <img src="http://localhost:8083/resource_packs/images/pop_ups_closes.png"
                 alt="弹窗关闭" class="pop-ups-down" style="margin-left: 92%;">
        </div>
        <div class="pop-ups-content">
            <div style="width: 100%;display: inline-flex;padding-bottom: 10px">
                <div style="width: 80%">
                    <div class="window-commodity-basic-information">
                        <div class="name-and-price">
                            <h2 class="name"></h2>
                            <span class="window-commodity-discount-price"></span>
                            <a class="window-commodity-original-price"></a>
                        </div>
                        <div class="keywords-text"></div>
                    </div>
                    <div style="display: inline-flex;width: 100%;border-top: #e0e0e0 1px solid;padding-top: 10px;flex-wrap:wrap; ">
                        <div class="window-commodity-images"></div>
                    </div>
                    <div class="window-commodity-from">
                        <div class="window-commodity-gifts"></div>
                        <div style="display: inline-flex;width: 100%">
                            <div class="window-commodity-specifications">

                            </div>
                            <div class="window-commodity-insurances">

                            </div>
                        </div>
                        <div class="window-commodity-details">
                            <span>商品详细</span>
                            <div class="window-commodity-details-video">

                            </div>
                            <div class="window-commodity-details-images">

                            </div>
                        </div>
                        <div class="window-commodity-parameter">
                            <span class="window-commodity-parameter-title">商品参数</span>
                            <div class="window-commodity-details-parameter">

                            </div>
                        </div>
                    </div>
                </div>
                <div style="width: 20%;background-color: #F5F5F5;padding-bottom:10px;border-top: 1px solid #e0e0e0;border-bottom: 1px solid #e0e0e0;">
                    <div class="window-update-commodity-from">
                        <p style="width: 80%;margin-left: 10px;">
                            <a style="margin-left: 10px;color: #333;">商品类别 : </a>
                            <span class="window-commodity-type"></span>
                        </p>
                        <label class="window-update-commodity-name">
                            <input alt="商品名称" type="text" value="" placeholder="请输入新商品名称（回车保存）"/>
                            <span>商品名称</span>
                        </label>
                        <label class="window-update-commodity-price">
                            <input alt="商品折扣后价格" type="number" value="" placeholder="请输入价格（回车保存）"/>
                            <span>RMB</span>
                        </label>
                        <label class="window-update-commodity-discounte">
                            <input alt="商品折扣" type="number" value="" placeholder="请输入折扣（回车保存）"/>
                            <span>折</span>
                        </label>
                        <hr class="window-commodity-dividing-line"/>
                        <label class="window-commodity-product-description">
                            <textarea rows="1" cols="25" placeholder="请输入商品描述（回车保存）"></textarea>
                            <span>商品描述</span>
                        </label>
                        <label class="window-add-commodity-keyword">
                            <input class="add-keyword" placeholder="请输入关键字（回车保存）"/>
                            <span>关键字</span>
                        </label>
                        <hr class="window-commodity-dividing-line"/>
                        <label class="window-update-commodity-specifications-type">
                            <input alt="商品规格类别" type="text" value=""
                                   placeholder="请输入规格类别（回车保存）"/>
                            <span>规格类别</span>
                        </label>
                        <label class="window-update-commodity-specifications">
                            <input alt="商品规格" type="text" value=""
                                   placeholder="请输入规格（回车保存）"/>
                            <select style="width: 20%">

                            </select>
                        </label>
                        <label class="window-add-commodity-specifications-price">
                            <input alt="商品规格价格" type="number" value=""
                                   placeholder="请输入规格价格（默认0元）"/>
                            <span>RMB</span>
                        </label>
                        <label class="window-update-commodity-specifications-type">
                            <select>

                            </select>
                            <button class="window-remove-commodity-specifications-type">
                                删除
                            </button>
                        </label>
                        <hr class="window-commodity-dividing-line"/>
                        <label class="window-update-commodity-insurance">
                            <input alt="商品保险" type="text" value=""
                                   placeholder="请输入保险（回车保存）"/>
                            <select style="width: 20%">

                            </select>
                        </label>
                        <label class="window-add-commodity-insurance-price">
                            <input alt="商品保险价格" type="number" value=""
                                   placeholder="请输入保险价格"/>
                            <span>RMB</span>
                        </label>
                        <label class="window-add-commodity-insurance-detailed">
                            <input alt="商品保险详细" type="text" value=""
                                   placeholder="请输入保险详细"/>
                            <span>保险详细</span>
                        </label>
                        <div class="window-add-commodity-details">
                            <label class="window-add-commodity-details-img"
                                   style="height: 150px;text-align: center;line-height: 200px;cursor: pointer;">
                                <div style="height: 100%;display: grid;text-align: center;">
                                    <img src="http://localhost:8083/resource_packs/images/add_commodity_img.png"
                                         alt="添加详细图片" style="margin: auto;">
                                    <span style="height: 10px;line-height: 20px;text-align: center;">
                                    商品详细图片添加
                                </span>
                                    <input type="file" name="file" class="upload-details-image" style="display: none;">
                                </div>
                            </label>
                        </div>
                        <hr class="window-commodity-dividing-line"/>
                        <label class="window-add-commodity-parameter-title">
                            <input alt="商品参数标题" type="text" value=""
                                   placeholder="商品参数标题（回车保存）"/>
                            <span>参数标题</span>
                        </label>
                        <label class="window-add-commodity-parameter-context"
                               style="height: 150px;display: inline-flex;">
                            <textarea rows="9" cols="25" placeholder="请输入参数内容"></textarea>
                            <button style="height: 25px;
    text-align: center;
    position: absolute;
    margin-top: 125px;
    border: 1px solid #67C23A;
    background-color: #67C23A;
    color: #fff;
    border-radius: 3px;
    margin-left: 11%;
    cursor: pointer;
    width: 5%;" class="window-add-parameter-image">
                                上传图片
                            </button>
                            <input type="file" name="file" class="upload-parameter-image" style="display: none">
                        </label>
                    </div>
                </div>
            </div>
            <div class="window-keywords-text-caution">
                <span>注意 : 双击删除 回车保存</span>
                <div class="window-commodity-serve">
                </div>
            </div>
        </div>
    </div>
</div>


<div class="add-window" style="display: none">
    <div class="pop-up-shade-layer"></div>
    <div class="pop-ups">
        <div class="pop-ups-title">
            <span>新增商品</span>
            <img src="http://localhost:8083/resource_packs/images/pop_ups_closes.png"
                 alt="弹窗关闭" class="pop-ups-down">
        </div>
        <div class="window-add-commodity-from">
            <label class="window-add-commodity-name">
                <input value="" type="text" placeholder="请输入商品名称"><span>商品名称</span>
            </label>
            <label class="window-add-commodity-price">
                <input value="" type="number" placeholder="请输入商品价格"><span>商品价格</span>
            </label>
            <label class="window-add-commodity-keyword">
                <input value="" type="text" placeholder="请输入商品关键字"><span>商品关键字</span>
            </label>
            <label class="window-add-commodity-description">
                <input value="" type="text" placeholder="请输入商品描述"><span>商品描述</span>
            </label>
            <label style="cursor: pointer;display: inline-flex;" class="add-commodity-img">
                <img src="http://localhost:8083/resource_packs/images/add_commodity_img.png" style="
                margin-top: 5px;margin-left: 10px;width:20px;height: 20px;margin-right: 73%;" alt="添加图片"/>
                <input type="file" name="file" class="upload-add-commodity-image" style="display: none">
                <span style="margin-left: 10px">商品图片封面</span>
            </label>
            <label class="window-add-commodity-type">
                <select class="window-add-commodity-model" style="border: none;margin-left: 5px;outline: none;">
                    <jsp:useBean id="modelList" scope="request" type="java.util.List"/>
                    <c:forEach var="model" items="${modelList}" varStatus="status">
                        <option value="${model.modelId}">${model.modelName}</option>
                    </c:forEach>
                </select>
                <select class="window-add-commodity-category" style="border: none;margin-left: 5px;outline: none;">
                </select>
                <select class="window-add-commodity-class" style="border: none;margin-left: 5px;outline: none;">
                </select>
                <span>商品类别</span>
            </label>
            <label class="window-add-commodity-specifications">
                <input value="" type="text" placeholder="请输入商品规格" style="width: 78%;">
                <select style="border: none;outline: none;">
                </select>
            </label>
            <button class="add-commodity-button">新增</button>
        </div>
    </div>
</div>
</body>
</html>
